import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:it_cat/Tools/tools_base_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';


class HomeAdaptationPage extends CatBaseWidgetPage {
  @override
  _HomeAdaptationPageState getState() => _HomeAdaptationPageState();
}

class _HomeAdaptationPageState extends CatBaseWidgetPageState<HomeAdaptationPage> {

  // 在我们日常应用中可能会需要设置横竖屏，或锁定单方向屏幕等不同要求，通过 **setPreferredOrientations** 配合实现；简单可以按 **portraitUp 上 / portraitDown 下 / landscapeLeft 右 / landscapeRight 左** 来区分；
  //
  // **Tips：landscapeLeft 是以 portraitUp 顺时针旋转 90 度；landscapeRight 是以逆时针旋转 90 度，故是视觉相反。**
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    title = '屏幕适配';
  }
  @override
  Widget buildWidget(BuildContext context) {
    //平均的尺寸需要除去比例
    final double width = ScreenUtil().screenWidth / ScreenUtil().scaleWidth;

    print(width);
    //填入设计稿中设备的屏幕尺寸
    return new Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Row(
            children: <Widget>[
              Container(
                width: ScreenUtil().setWidth(width/2),
                height: ScreenUtil().setHeight(130),
                color: Colors.red,
                child: Text(
                  '我的宽度:${ScreenUtil().setWidth(width/2)}dp',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: ScreenUtil().setSp(24),
                  ),
                ),
              ),
              Container(
                width: ScreenUtil().setWidth(width/2),
                height: ScreenUtil().setHeight(130),
                color: Colors.blue,
                child:
                Text('我的宽度:${ScreenUtil().setWidth(width/2)}dp',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24.sp, //同 ScreenUtil().setSp(24)
                    )),
              ),
            ],
          ),

          Text('设备宽度:${ScreenUtil().screenWidth}px'),
          Text('设备高度:${ScreenUtil().screenHeight}px'),
          Text('设备宽度:${ScreenUtil().scaleWidth}dp'),
          // Text('设备高度:${ScreenUtil().screenHeightDp}dp'),
          // Text('设计稿宽度:${ScreenUtil().width}'),
          Text('设备的像素密度:${ScreenUtil().pixelRatio}'),
          Text('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'),
          Text('状态栏高度:${ScreenUtil().statusBarHeight}dp'),
          Text(
            '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}',
            textAlign: TextAlign.center,
          ),
          Text(
            '实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}',
            textAlign: TextAlign.center,
          ),
          SizedBox(
            height: ScreenUtil().setHeight(100),
          ),
          // Text('系统的字体缩放比例:${ScreenUtil().textScaleFactory}'),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: ScreenUtil().setSp(24))),
              Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize:
                    //  ScreenUtil().setSp(24, allowFontScalingSelf: true),同下
                    24.ssp,
                  )
              ),
                //适配字体(不会根据系统的“字体大小”辅助选项来进行缩放)

            ],
          ),
          //UI可能显示长方形:
          Container(
            width: 200.w,
            height: 200.h,
            color: Colors.blue,
          ),
          //如果你想显示一个正方形:
          Container(
            width: 200.r,
            height: 200.r,
            color: Colors.red,
          ),
        ],
      ),
    );

  }


}
